<template>
  <div class="content">
    <Table class="el-table" :data="tableData" :columns="columns" :stripe="true" :border="true">
      <!-- 自定义单元格内容示例 -->
      <template #cell-action="{ row }">
        <button @click="editRow(row)">编辑</button>
        <button @click="deleteRow(row)">删除</button>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
import Table from '@/widget/table/index.vue';
import type { Column, RowData } from '@/widget/table/type';
import { ref } from 'vue';

// 定义列配置，使用响应式引用以便能够更新列宽
const columns = ref<Column[]>([
  { prop: 'id', label: 'ID', width: 80, align: 'center' },
  { prop: 'name', label: '名称', minWidth: 120 },
  { prop: 'age', label: '年龄', width: 80, align: 'center', sortable: true },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 },
  {
    prop: 'action',
    label: '操作',
    width: 150,
    align: 'center',
    fixed: 'right',
    formatter: (row: RowData) => {
      return row.disabled ? '已禁用' : '正常';
    }
  }
]);

// 表格数据
const tableData: RowData[] = [
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', disabled: true },
  { id: 3, name: '王五', age: 28, address: '广州市天河区' }
];

// 事件处理
const handleRowClick = (row: RowData) => {
  console.log('点击行:', row);
};

const handleSortChange = (column: Column, prop: string, order: 'ascending' | 'descending' | null) => {
  console.log('排序变化:', { column, prop, order });
  // 实现排序逻辑
};

const editRow = (row: RowData) => {
  console.log('编辑行:', row);
};

const deleteRow = (row: RowData) => {
  console.log('删除行:', row);
};

// 处理列宽调整事件
const handleColumnResize = (columnIndex: number, newWidth: number) => {
  console.log('列宽调整:', { columnIndex, newWidth });
  // 这里可以添加保存列宽配置的逻辑，例如保存到localStorage或后端
  // localStorage.setItem('tableColumnWidths', JSON.stringify(columns.value));
};
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table {
  width: 500px;
  height: 300px;
}
</style>
